<template>
  <a-style-provider
    prefixCls="my"
    hash-priority="high"
    :transformers="[legacyLogicalPropertiesTransformer]"
  >
    <a-config-provider
      :locale="zhCN"
      :theme="{
        algorithm: theme[store.userStore.theme],
        token: store.userStore.color
        // components: store.userStore.components
      }"
    >
      <a-spin class="spin" :spinning="spinning">
        <router-view />
      </a-spin>
    </a-config-provider>
  </a-style-provider>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, computed } from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import store from './store'
import { setTheme } from './store/modules/user'
// import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
import { theme, legacyLogicalPropertiesTransformer, Select } from 'ant-design-vue'
import { ScreenInfo } from '@/utils/device'
// 全局loading工具
const spinning = computed(() => {
  return store.userApp.spinning
})

// 微前端数据通信
// import microApp from '@micro-zoe/micro-app'
// const d = computed(() => {
//   return {
//     theme: store.userStore.theme,
//     color: {
//       ...store.userStore.color
//     },
//     setTheme: setTheme,
//     platformId: store.userStore.platformId,
//     token: store.userStore.token
//   }
// })
//
// watch(
//   () => d,
//   (val) => {
//     // bus.emit('sendData', val)
//     microApp.forceSetData('template', val, () => {
//       console.log('数据已经发送完成')
//     })
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
//
// window.addEventListener('resize', () => {
//   console.log(ScreenInfo)
// })

const tokens = computed(() => {
  return {
    theme: store.userStore.theme,
    token: store.userStore.color
  }
})

Select.props.getPopupContainer.default = (trigger) => trigger.parentNode
Select.props.optionFilterProp = {
  default: 'label',
  type: String
}

// document.documentElement.style.setProperty('--color--danger', store.userStore.color.colorDanger)

watch(
  tokens,
  () => {
    setTheme(store.userStore.theme, store.userStore.color)
  },
  {
    immediate: true,
    deep: true
  }
)

// const app = userApp()
// const router = useRouter()

// const routeNew = ref({})
// const routeOld = ref({})

// const contrast = (t1, t2) => {
//   const f1 = t1.split('/')
//   const f2 = t2.split('/')
//   if (f1.length && f2.length && f1.length !== f2.length) {
//     let min = 0
//     if (f1.length < f2.length) {
//       min = f1.length
//     } else {
//       min = f2.length
//     }
//     let flag = false
//     for (let i = 0; i < min; i++) {
//       if (f1[i] !== f2[i]) {
//         flag = true
//         break
//       }
//     }
//     if (!flag) {
//       return false
//     }
//   }
//   return true
// }

// watch(
//   () => router.currentRoute.value,
//   (n, o) => {
//     routeNew.value = n
//     routeOld.value = o
//     if (contrast(n.path, o.path)) {
//       app.keepAliveRoutesClear()
//     }
//     if (n.meta.keepalive) {
//       app.keepAliveRoutesPush(n.name)
//     }
//   }
// )

// const handleBeforeUnload = () => {
//   if (routeOld.value?.meta?.keepalive) {
//     app.keepAliveRoutesDel(routeOld.value?.name)
//   }
//   console.log('页面后退了')
// }
// window.addEventListener('popstate', handleBeforeUnload)
</script>

<style lang="less">
html[theme='light'] {
  color: #000;
  background: #fff;
}

html[theme='dark'] {
  color: #fff;
  background: #000;
}

#app {
  box-sizing: border-box;
  height: 100%;
}

.page-enter-active {
  // position: fixed;
  // top: 0;
  // left: 0;
  transition: all 0.25s ease-in-out;
}

.page-leave-active {
  // position: fixed;
  // top: 0;
  // left: 0;
  transition: all 0.25s ease-in-out;
}

.page-enter-from {
  opacity: 0;
}

.page-enter-to {
  opacity: 1;
}

.page-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-2em);
}

.spin {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;

  .ant-spin-dot {
    top: calc(50% - 10px) !important;
    left: calc(50% - 10px) !important;
    margin: 0 !important;
  }
}
</style>
